<template>
  <van-row class="orderinfo">
    <van-nav-bar
      fixed
      :z-index="100"
      title="订单详情"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="ordercontent" v-if="checkInfoList">
      <!-- <store-scroller @onRefresh="onRefresh"> -->
        <div class="ordestatus">
          <div class="tip">
            <h2 v-show="!orderCancel">{{proStatus[checkInfoList.status]}}</h2>
            <h2 v-show="orderCancel">订单已取消</h2>
            <div class="count-down" v-if="checkInfoList.status == 0 && !orderCancel">
              <div>剩余</div>
              <van-count-down :time="oTime" @finish="onFinish"/>
              <div>自动取消定单</div>
            </div>
            <!-- <div class="ordersubinfo" v-show="whichStep != 'success'">{{ordersubinfo}}</div> -->
          </div>
          <div class="ordericon">
            <van-icon name="send-gift"/>
          </div>
        </div>
        <div class="orderAddress">
          <van-cell-group>
            <van-cell icon="location-o" :label="addressList.address">
              <template slot="title">
                <span class="custom-title">{{addressList.name}}</span>
                <span class="custom-title">{{addressList.tel}}</span>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
        <div class="orderSpec">
          <van-card
            v-for="(item,index) in checkInfoList.orderItemList"
            :key="item.id"
            :num="item.productQuantity"
            :title="item.productName"
            :price="item.productPrice"
            :thumb="item.productPic"
            @click="jumpGoods(item.productId)"
          >
            <div slot="tags">
              <van-tag
                plain
                type="danger"
                v-for="(item,index) in JSON.parse(item.productAttr)"
                :key="index"
              >{{item.key}}:{{item.value}}</van-tag>
            </div>
            <div
              v-show="index == checkInfoList.orderItemList.length-1"
              slot="footer"
              class="productSpec"
            >
              <!-- <div v-show="product.orderItemList">共{{product.orderItemList[0].productQuantity}}件商品</div> -->
              <div class="due">
                应付款：￥
                <span>{{checkInfoList.payAmount}}</span>
                (含运费￥{{checkInfoList.freightAmount}})
              </div>
              <!-- 已收货 && 未申请售后 -->
              <van-button 
                v-if="checkInfoList.status == 3 && checkInfoList.orderItemList[0].serviceStatus == -1"
                size="mini" 
                @click.stop="refundEvent()">
                申请售后
              </van-button>
            </div>
          </van-card>
          <van-cell title="实付款" :value="`￥${checkInfoList.payAmount || 0}`"/>
          <van-cell v-if="checkInfoList.orderIntegralCount > 0" class="Integral" title="积分抵扣" :value="`￥${checkInfoList.orderIntegralAmount || 0} (${checkInfoList.orderIntegralCount}个)`"/>
        </div>

        <div class="orderinfos">
          <van-cell title="订单信息"/>
          <van-cell :border="false">
            <!-- 使用 title 插槽来自定义标题 -->
            <template slot="title" v-if="checkInfoList.orderItemList">
              <span class="custom-title">订单编号</span>
              <span class="custom-content">{{checkInfoList.orderItemList[0].orderSn}}</span>
              <van-button
                type="danger"
                size="mini"
                class="copyNumClass"
                :data-clipboard-text="checkInfoList.orderItemList[0].orderSn"
                @click="copyNum"
              >复制</van-button>
            </template>
          </van-cell>
          <van-cell :border="false">
            <!-- 使用 title 插槽来自定义标题 -->
            <template slot="title" v-if="checkInfoList.createTime">
              <span class="custom-title">创建时间</span>
              <span class="custom-content">{{formatTime(checkInfoList.createTime)}}</span>
            </template>
          </van-cell>
          <van-cell :border="false">
            <!-- 使用 title 插槽来自定义标题 -->
            <template slot="title" v-if="checkInfoList.paymentTime">
              <span class="custom-title">付款时间</span>
              <span class="custom-content">{{formatTime(checkInfoList.paymentTime)}}</span>
            </template>
          </van-cell>
          <van-cell :border="false" v-if="checkInfoList.deliveryTime">
            <!-- 使用 title 插槽来自定义标题 -->
            <template slot="title">
              <span class="custom-title">发货时间</span>
              <span class="custom-content">{{formatTime(checkInfoList.deliveryTime)}}</span>
            </template>
          </van-cell>
          <van-cell :border="false" v-if="checkInfoList.receiveTime">
            <!-- 使用 title 插槽来自定义标题 -->
            <template slot="title">
              <span class="custom-title">成交时间</span>
              <span class="custom-content">{{formatTime(checkInfoList.receiveTime)}}</span>
            </template>
          </van-cell>
        </div>
      <!-- </store-scroller> -->
    </div>
    <van-tabbar v-show="isSendProduct || isShowDelete">
      <van-button type="danger" plain size="mini" v-show="isShowDelete" @click="deleteOrder">删除订单</van-button>
      <van-button type="danger" plain size="mini" v-show="isSendProduct" @click="checkFee">查看物流</van-button>
      <!-- <van-button type="danger" plain size="mini" v-show="isGetProduct" @click="toAssess">去评价</van-button> -->
    </van-tabbar>
    <store-loding v-show="loding"></store-loding>
  </van-row>
</template>
<script>
import Vue from 'vue'
// import { mapState } from 'vuex'
// import storeScroller from '@/components/store-scroller'
import storeCard from '@/components/store-card'
import ClipboardJS from 'clipboard'
import storeLoding from '@/components/store-loding'
import { format } from '@/utils/util'
import {
  AddressList,
  Tab,
  Tabs,
  NavBar,
  Card,
  Button,
  Tag,
  Row,
  Toast,
  Icon,
  Cell,
  CellGroup,
  Tabbar,
  TabbarItem,
  Dialog,
  CountDown
} from 'vant'
Vue.use(NavBar)
  .use(AddressList)
  .use(Tab)
  .use(Tabs)
  .use(Card)
  .use(Button)
  .use(Tag)
  .use(Row)
  .use(Toast)
  .use(Icon)
  .use(Cell)
  .use(CellGroup)
  .use(Tabbar)
  .use(TabbarItem)
  .use(Dialog)
  .use(CountDown)
export default {
  name: 'orderinfo',
  components: {
    // storeScroller,
    storeCard,
    storeLoding
  },
  data() {
    return {
      /* 
      订单售后状态：
        无售后 = -1
        买家申请 = 0
        已同意 = 1
        已拒绝 = 2
        管理员审核 = 3
        买家已发货 = 4
        买家已取消 = 5
        已完成 = 6
     */
      ordersubinfo: '去评价下本次的购物体验吧~',
      whichStep: 'success',
      proStatus: ['待付款', '已付款', '已发货', '已收货', '已关闭', '交易成功', '退款中'],
      priceSpecList: ['商品总价', '运费', '店铺优惠', '订单总价'],
      loding: false,
      checkInfoList: {}, // 订单详情调接口
      oTime: 15 * 60 * 1000, // 15 * 60 * 60 * 1000
      orderCancel: false // 订单已取消
    }
  },
  computed: {
    // ...mapState({
    //   checkInfoList: state => state.order.checkInfoList
    // }),
    addressList() {
      return {
        name: this.checkInfoList.receiverName,
        tel: this.checkInfoList.receiverPhone,
        address: `${this.checkInfoList.receiverProvince || ''}
        ${this.checkInfoList.receiverCity || ''}
        ${this.checkInfoList.receiverRegion || ''}
        ${this.checkInfoList.receiverDetailAddress || ''}`  
      }
    },
    isSendProduct() {
      return (
        this.checkInfoList.status == '2'
      )
    },
    isGetProduct() {
      return this.checkInfoList.status == '3' && this.checkInfoList.orderItemList[0].commentStatus != 1
    },
    isShowDelete() {
      return (
        this.checkInfoList.status == '4' || this.checkInfoList.status == '5'
      )
    }
  },
  created() {
    this.getOrderDetail()
  },
  beforeDestroy() {
    // this.$store.commit('order/SET_CHECK_INFO_LIST', {})
  },
  methods: {
    /******** 跳转到商品链接 ********/
    jumpGoods(id) {
      this.$router.push({
        name: 'goods',
        params: {
          id
        }
      })
    },
    /******** 获取订单信息 ********/
    getOrderDetail() {
      this.loding = true
      this.$http
        .post('/order/orderDetail', {
          orderId: this.$route.query.orderId
        })
        .then(data => {
          let orderCloseTime = parseInt(data.info.orderCloseTime)
          this.checkInfoList = data.info
          if (orderCloseTime > 0) {
            this.oTime = orderCloseTime
          }
          this.$store.commit("order/SET_CHECK_INFO_LIST", data.info)
        })
        .finally(() => {
          this.loding = false
        })
    },
    /* 倒计时结束 */
    onFinish() {
      this.orderCancel = true
    },
    /*************返回点击事件***************/
    onClickLeft() {
      this.$router.go(-1)
    },

    formatTime(time) {
      return format(time, 'yyyy-MM-dd hh:mm:ss')
    },

    /*************点击返回首页事件*********/
    checkFee() {
      this.$router.push({
        name: 'productExpress',
        params: {
          pid: this.checkInfoList.orderItemList[0].orderId
        }
      })
    },
    /*************点击立即评价事件*********/
    /* toAssess() {
      this.$router.push({
        name: 'comment',
        params: {
          pid: this.checkInfoList.orderItemList[0].orderId
        }
      })
    }, */

    /***********下拉事件*********/
    onRefresh(done) {
      setTimeout(() => {
        if (done) done()
      },500)
      // this.$store.dispatch('home/content').finally(() => {
      //   // this.isLoading = false;
      //   if (done) done()
      // })
    },
    /**********删除订单*********/
    deleteOrder() {
      let title = '删除订单'
      let message = '确定删除这个订单吗？'
      Dialog.confirm({
        title,
        message
      })
        .then(() => {
          // on confirm
          this.deleteOrderFn()
        })
        .catch(() => {
          // on cancel
        })
    },
    /************复制按钮点击点击事件*********/
    copyNum () {
      var clipboard = new ClipboardJS('.copyNumClass')
      clipboard.on('success', function(e) {
        Toast.success(`复制成功`)
        e.clearSelection()
      })

      clipboard.on('error', function() {
        Toast.fail('复制失败')
      })
    },
    /***********删除订单事件*********/
    deleteOrderFn () {
      this.loding = true
      const params = {
        orderId: this.checkInfoList.orderItemList[0].orderId
      }
      this.$http
        .post('/order/deleteOrder', params)
        .then(() => {
          this.loding = false
          this.$router.go(-1)
        })
        .catch(error => {
          console.log(error)
        })
    },
    /*******申请售后 退款事件******/
    refundEvent() {
      this.$store.commit('order/SET_CHECK_INFO_LIST', this.checkInfoList)
      this.$router.push({
        name: 'refund',
        params: {
          id: this.checkInfoList.id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.orderinfo {
  padding: 78px 0 50px;
  .van-nav-bar {
    padding-top: 20px;
  }
  .ordestatus {
    background: #fff;
    height: 150px;
    display: flex;
    align-items: center;
    .tip {
      width: 50%;
      padding-left: 20px;
      color: $primary-clr;
      height: 60px;
      .van-icon-checked {
        font-size: 18px;
      }
      .count-down{
        -webkit-display: flex;
        display: flex;
        color: $text-clr;
        padding-top: 5px;
        .van-count-down{
          padding: 0 4px;
          color: $text-clr;
        }
      }
    }
    .ordersubinfo {
      height: 30px;
      line-height: 30px;
    }
    .ordericon {
      width: 50%;
      font-size: 100px;
      text-align: center;
      color: $red;
    }
  }
  .orderAddress {
    margin-top: 10px;
    .van-cell__left-icon {
      width: 45px;
      height: 45px;
      font-size: 30px;
      line-height: 45px;
      background: $red;
      border-radius: 50%;
      color: #fff;
      text-align: center;
    }
    .custom-title {
      margin-right: 10px;
      &:nth-child(2) {
        color: $gray-deep;
      }
    }
  }
  .orderSpec {
    background: #fff;
    margin-top: 10px;
    .van-card {
      background: #fff;
      border-bottom: 1px solid #eee;
    }
    .footerBtn {
      margin-bottom: 10px;
    }
    .footerPl {
      display: flex;
      justify-content: space-between;
      height: 20px;
      line-height: 20px;
      color: $gray-deep;

      &:nth-last-child(1) {
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        color: #000;
      }
    }
    .van-cell {
      font-size: 18px;
      .van-cell__value {
        color: $red;
      }
    }
    .Integral .van-cell__value {
      font-size: 14px;
      color: #999;
    }
  }
  .orderinfos {
    margin: 10px 0;

    .van-cell__title {
      display: flex;

      .custom-title {
        width: 30%;
      }
      .custom-content {
        width: 55%;
        color: $gray-deep;
      }
      .van-button {
        color: #fff
      }
    }
  }
  .mayLike {
    .mayLikeTitle {
      display: flex;
      align-items: center;
      height: 50px;
      justify-content: center;
      color: $red;
      font-size: 16px;
      .leftLine,
      .roghtLine {
        height: 1px;
        width: 20px;
        background: $red;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          top: -2px;
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background: $red;
        }
      }
      .leftLine {
        margin-right: 5px;
        &::before {
          left: 0;
        }
      }
      .roghtLine {
        margin-left: 5px;
        &::before {
          right: 0;
        }
      }
    }
    .store-card {
      margin-top: 0;
    }
  }
  .van-tabbar {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 0 16px;
  }
}
.van-button {
  height: 20px;
  line-height: 20px;
  border-radius: 11px;
  padding: 0 10px;
  margin: 0 0 0 10px;
  border: 1px solid #ccc;
  color: #999;
}
.due{
  height: 22px;
}
</style>
